<template>
  <!-- 确认订单 活动回显 -->
  <div class="active_list">
    <div v-for="(item, index) in activeOptions" :key="item.id" :class="`active_list_item ${activeOrder.id == item.id ? 'active' : ''}`" @click="activeChange(item, index)">
      <div v-bind="$attrs" v-on="$listeners">
        <div class="active_list_header">
          <div class="active_item">
            <span>活动名称：</span>
            <span class="active_name">{{ item.name }}</span>
            <activeDetail :show="item.show" :active-detail="item">
              <i class="el-icon-warning active_icon" />
            </activeDetail>
          </div>
          <div class="active_item hide_text">
            <span>活动时间：</span>
            <span class="active_time">{{ item.startTime }} 至 {{ item.endTime }}</span>
          </div>
          <div class="active_item">
            <template v-if="item.type == 'SWAPE'">
              满<span>{{ item.conditionMoney - 0 }}</span> 再加<span>{{ item.extraMoney - 0 }},可以换购产品</span>
            </template>
            <template v-if="item.type == 'DERATE'">
              满<span>{{ item.conditionMoney - 0 }}</span> 减<span>{{ item.derateMoney - 0 }}</span>
              <template v-if="item.isSuperposition">（可叠加）</template>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import activeDetail from './active-detail'
export default {
  components: { activeDetail },
  props: {
    options: {
      type: Array,
      default: () => {
        return []
      }
    },
    activeOrder: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      activeOptions: []
    }
  },
  watch: {
    options: {
      handler() {
        this.activeOptions = this.options
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    activeChange(item, index) {
      this.$emit('change', item, index)
      this.activeTimer(item, index)
    },
    // 添加展示动画
    activeTimer(item, index) {
      this.resetActiveStyle(item, index, true)
      let timer = setTimeout(() => {
        this.resetActiveStyle(item, index, false)
        clearTimeout(timer)
      }, 10000)
    },
    resetActiveStyle(item, index, show) {
      this.activeOptions = this.activeOptions.map((v, i) => {
        v.show = show ? index == i : false
        return v
      })
    }
  }
}
</script>
